<template>
  <div class="person">
    <div class="header">
      <div class="setting" @click="logout">
        <img src="@/assets/img/person/setting.png">
      </div>
      <div class="user-info">
        <div class="img">
          <img src="@/assets/img/person/headpic.png">
        </div>
        <div class="info">
          <div class="username">{{ $store.getters.getUserInfo.name }}</div>
          <div class="activity">
            <em>升级企业<i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i></em>
          </div>
          <div class="discount">
            <span>优惠券：<i>5</i>张未使用</span>
            <em>查看<i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i></em>
          </div>
        </div>
      </div>
    </div>
    <div class="order">
      <van-cell :border="false" title="我的订单" is-link value="全部" />
      <div class="items">
        <div class="item" v-for="item in orderList" :key="item.name">
          <div class="img"><img :src="item.img"></div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="ask">
      <van-cell :border="false" title="我的询价单" is-link value="全部" />
      <div class="items">
        <div class="item" v-for="item in askList" :key="item.name">
          <div class="img"><img :src="item.img"></div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="serve">
      <van-cell :border="false" title="我的客服">
        <template #right-icon>
          <span class="right-icon">
            <i class="yu-ui-iconfont yu-ui-icon-kefu"></i>
            客服
          </span>
        </template>
      </van-cell>
      <div class="items">
        <div class="item" v-for="item in serveList" :key="item.name">
          <div class="img"><img :src="item.img"></div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import "@/assets/iconfont/search.css"

export default {
  data() {
    return {
      orderList: [
        {
          img: require("@/assets/img/person/topay.png"),
          name: "待付款"
        },
        {
          img: require("@/assets/img/person/tocollect.png"),
          name: "待收款"
        },
        {
          img: require("@/assets/img/person/done.png"),
          name: "已完成"
        }
      ],
      askList: [
        {
          img: require("@/assets/img/person/quoted.png"),
          name: "已报价"
        },
        {
          img: require("@/assets/img/person/part-quotation.png"),
          name: "部分报价"
        },
        {
          img: require("@/assets/img/person/toquote.png"),
          name: "待报价"
        }
      ],
      serveList: [
        {
          img: require("@/assets/img/person/mylist.png"),
          name: "我的清单"
        },
        {
          img: require("@/assets/img/person/addr.png"),
          name: "地址管理"
        },
        {
          img: require("@/assets/img/person/user.png"),
          name: "账户管理"
        },
        {
          img: require("@/assets/img/person/living.png"),
          name: "直播中心"
        },
        {
          img: require("@/assets/img/person/history.png"),
          name: "历史购买"
        },
        {
          img: require("@/assets/img/person/collect.png"),
          name: "关注收藏"
        },
        {
          img: require("@/assets/img/person/problem.png"),
          name: "问题反馈"
        }
      ]
    }
  },
  methods: {
    logout() {
      this.$router.push({ name: 'login' });
      // 清除过期信息
      this.$store.dispatch("clearUserAsync").then(res => {
        console.log(res);
      })
    }
  },
}
</script>

<style lang="less">
.person {
  .header {
    background: #fff;
    border-width: 0;
    border-color: #f9f9f9;
    border-bottom-width: 5px;
    border-style: solid;
    padding: 35px 12px 12px;

    .setting {
      font-size: 14px;
      color: #333;
      float: right;
      margin-top: 0;

      img {
        display: block;
        width: 18px;
      }
    }

    .user-info {
      display: flex;
      margin-top: 23.5px;

      .img {
        flex: 0 0 60px;

        img {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }

      .info {
        padding-left: 9.5px;
        flex: 1;
        color: #333;

        .username {
          min-height: 23.5px;
          font-size: 16px;
          color: #333;
          line-height: 23.5px;
          display: flex;
          justify-content: flex-start;
          margin-bottom: 7px;
        }

        .activity {
          em {
            padding: 0 7.5px 0 7px;
            background-color: #ff8d50;
            opacity: .9;
            text-align: center;
            font-size: 12px;
            display: inline-block;
            height: 18px;
            line-height: 16px;
            min-width: 17px;
            border-radius: 10px;
            border: 1px solid #ff8d50;
            color: #fff;

            i {
              position: relative;
              top: -1.5px;
              margin-left: 6px;
              font-size: 12px;
            }
          }
        }

        .discount {
          display: flex;
          justify-content: space-between;
          color: #333;
          margin-top: 15px;
          font-size: 15px;

          span {
            i {
              color: red;
            }
          }

          em {
            i {
              font-size: 13px;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }

  .order,
  .ask,
  .serve {
    padding-top: 16px;
    background: #fff;
    position: relative;
    padding-left: 12px;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    border-width: 0;
    border-color: #f9f9f9;
    border-bottom-width: 5px;
    border-style: solid;
    padding-bottom: 12px;

    .van-cell {
      height: 16px;
      padding: 0;
      line-height: 16.5px;
      font-size: 14px;

      .van-cell__value {
        font-size: 12px;
        color: #333;
      }

      .van-icon {
        margin-right: 12px;
        font-size: 12px;
        color: #333;
        position: relative;
        top: -3px;
        margin-left: 0px;
      }
    }

    .items {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 25%;
        text-align: center;
        color: #666;
        padding-top: 13px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
          width: 50px;
          height: 37px;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          margin-bottom: 5px;

          img {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
  }

  .serve {
    padding-bottom: 70px;
    border: 0;

    .van-cell {
      .right-icon {
        margin-right: 12px;
        font-weight: 400;
        font-size: 12px;
        color: #333;
      }
    }
  }
}
</style>
